<template>
  <div>
    <el-table v-loading="loading" :data="dataSource" border @row-click="handleRowClick" :height="autoHeight">
      <el-table-column prop="sourceProp" label="数据源属性" align="center"></el-table-column>
      <el-table-column prop="callModel" label="引用模型" align="center"></el-table-column>
      <el-table-column prop="queryBody" label="过滤参数" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="100px">
        <template slot="header">
          <el-button type="primary" @click="editData({})" icon="el-icon-circle-plus-outline">新增</el-button>
        </template>
        <div slot-scope="scope">
          <template v-if="select">
            <el-button type="success" icon="el-icon-thumb" circle @click="$emit('rowSelect',scope.row)" title="选择"></el-button>
          </template>
          <template v-else>
            <el-button type="success" icon="el-icon-edit" circle @click="editData(scope.row)" title="编辑"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="removeData(scope.row, scope.$index)" title="删除"></el-button>
          </template>
        </div>
      </el-table-column>
    </el-table>
    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>
    <el-dialog :visible.sync="visible" title="过滤参数" width="600px">
      <el-form label-position="right" label-width="90px">
        <el-form-item label="数据源属性">
          <el-input v-model="entityInfo.sourceProp" placeholder="值为空时为顶级对象"></el-input>
        </el-form-item>
        <el-form-item label="业务模型" required>
          <el-popover
              placement="bottom"
              title="数据模型选择"
              width="600"
              trigger="click"
              v-model="filterVisible">
            <app-model-table select @rowSelect="(row)=>{entityInfo.callModel=row.callCmd;filterVisible=false}"></app-model-table>
            <el-input slot="reference" v-model="entityInfo.callModel" @click="filterVisible = true"></el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="过滤属性" required>
          <span style="color: red">使用${xxx}参数占位,pageSize为1时为对象</span>
          <idea-code v-model="entityInfo.queryBodyStr" :config="{language:'json'}" style="height: 300px"></idea-code>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-circle-check" type="success" @click="saveFilter">{{ entityInfo.reportModelId ? '更新' : '保存' }}</el-button>
          <el-button icon="el-icon-circle-close" type="info" @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import AppModelTable from "@/views/system/app/model/AppModelTable";
import IdeaCode from "@/components/idea-code/IdeaCode";

export default {
  name: "ReportModel",
  components: {IdeaCode, AppModelTable},
  mixins: [IdeaTable],
  props: {
    select: {
      type: Boolean,
      default: false
    },
    templateId: {
      type: String,
      default: ''
    }
  },
  computed:{
    autoHeight() {
      return `calc(100vh - 405px)`
    }
  },
  data() {
    return {
      filterVisible: false
    }
  },
  created() {
    this.queryUrl = '/reportModel/queryPage'
    this.saveUrl = '/reportModel/save'
    this.removeUrl = '/reportModel/delete/'
    this.rowKey = 'reportModelId'
    this.addFilter({ field: 'templateId', op: '=', value: this.templateId })
    this.pageInfo.sorts.push({field: 'updateAt', asc: false })
    this.loadSource()
  },
  methods: {
    initEntity(){
      this.entityInfo = { queryBodyStr: { pageSize: 1, filters: [ { field: '过滤字段',op:'过滤操作',value: '过滤值' }] } }
    },
    editData(row){
      if (!this.$Util.isEmpty(row)) {
        this.entityInfo = this.$Util.copy(row)
        this.entityInfo.queryBodyStr = this.$Util.toObject(this.entityInfo.queryBody)
      } else {
        this.entityInfo = { queryBodyStr: '{ "pageSize": 100, "filters": [ { "field": "过滤字段","op":"过滤操作","value":"过滤值" }] }' }
      }
      this.visible = true
    },
    saveFilter() {
      this.entityInfo.appId = this.appInfo.appId
      this.entityInfo.templateId = this.templateId
      this.entityInfo.queryBody = this.$Util.toJsonStr(this.entityInfo.queryBodyStr)
      this.saveData(this.entityInfo)
    }
  }
}
</script>

<style scoped>

</style>
